<!-- author: xuett -->
<!-- date: 2024-07-12 09:40:26 -->
<!-- description: 右侧配置 -->
<template>
  <div class="right-box">
    <div class="header">配置面板</div>
    <div class="setting-box">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组件配置" name="chartSetting">
          <div v-if="chartInfo" class="chart-setting">
            <el-form :model="chartInfo" label-width="80px">
              <el-form-item label="宽">
                <el-input-number v-model="chartInfo.width" @input="updateScale" />
              </el-form-item>
              <el-form-item label="高">
                <el-input-number v-model="chartInfo.height" @input="updateScale" />
              </el-form-item>
              <el-form-item label="左">
                <el-input-number v-model="chartInfo.left" @input="updateScale" />
              </el-form-item>
              <el-form-item label="上">
                <el-input-number v-model="chartInfo.top" @input="updateScale" />
              </el-form-item>
              <el-form-item label="zIndex">
                <el-input-number v-model="chartInfo.zIndex" />
              </el-form-item>
              <el-form-item v-if="chartInfo.options" label="图表配置">
                <el-button type="primary" @click="openOptionsDialog">调整配置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-empty v-else description="暂无组件配置" />
        </el-tab-pane>
        <el-tab-pane label="容器配置" name="containerSetting">
          <el-form :model="containerInfo" label-width="80px">
            <el-form-item label="宽">
              <el-input-number v-model="containerInfo.width" />
            </el-form-item>
            <el-form-item label="高">
              <el-input-number v-model="containerInfo.height" />
            </el-form-item>
            <el-form-item label="背景色">
              <el-color-picker v-model="containerInfo.backgroundColor" show-alpha />{{ containerInfo.backgroundColor }}
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <codeMirror ref="codeRef" title="图表配置" :code="chartOptions" @updateCode="updateChartOptions"></codeMirror>
</template>

<script setup>
import codeMirror from "@/components/CodeMirror/index.vue";
const $props = defineProps({
  container: {
    type: Object,
    default: () => ({})
  },
  chart: {
    type: [Object, null],
    default: null
  }
});
const $emit = defineEmits(["update:container", "update:chart", "updateScale"]);

// 组件配置
const chartInfo = computed({
  get: () => $props.chart,
  set: (val) => {
    $emit("update:chart", val);
  }
});

// 容器配置
const containerInfo = computed({
  get: () => $props.container,
  set: (val) => {
    $emit("update:container", val);
  }
});

const state = reactive({
  activeName: "containerSetting",
  chartOptions: ""
});
const { activeName, chartOptions } = toRefs(state);

//更新
const updateScale = () => {
  nextTick(() => {
    $emit("updateScale");
  });
};

const codeRef = ref(null);
//打开图表配置弹窗
const openOptionsDialog = () => {
  state.chartOptions = JSON.stringify(chartInfo.value.options);
  nextTick(() => {
    codeRef.value.showCode();
  });
};

//更新图表配置
const updateChartOptions = (code) => {
  chartInfo.value.options = JSON.parse(code);
};
</script>

<style scoped lang="scss">
.right-box {
  width: 300px;
  height: 100%;
  border-left: 1px solid #ccc;
  .header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
  }
  .setting-box {
    width: 100%;
    height: calc(100% - 40px);
    :deep(.el-tabs__item) {
      padding: 0 20px !important;
    }
  }
}
</style>
